前端在线聊天：实时通信和WebSocket集成

            
<div id="chat-container">
  <div id="message-area">
    <!-- Messages will be displayed here -->
  </div>
  <div id="input-area">
    <input type="text" id="message-input" placeholder="Type your message...">
    <button id="send-button">Send</button>
  </div>
</div>

            

              
                Copy
              
            
          

            
#chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}

#message-area {
  flex-grow: 1;
  padding: 10px;
  overflow-y: scroll;
}

#input-area {
  padding: 10px;
  border-top: 1px solid #ccc;
  display: flex;
}

#message-input {
  flex-grow: 1;
  padding: 5px;
  border: 1px solid #ccc;
  margin-right: 5px;
}

#send-button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

            
const socket = new WebSocket('ws://your-server-address:8080'); // Replace with your WebSocket server address
const messageArea = document.getElementById('message-area');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// Event listener for when the WebSocket connection is open
socket.addEventListener('open', (event) => {
  console.log('WebSocket connection established.');
});

// Event listener for when a message is received from the server
socket.addEventListener('message', (event) => {
  const message = event.data;
  displayMessage(message);
});

// Event listener for when the WebSocket connection is closed
socket.addEventListener('close', (event) => {
  console.log('WebSocket connection closed.');
});

// Event listener for errors
socket.addEventListener('error', (event) => {
  console.error('WebSocket error:', event);
});

// Function to send a message to the server
function sendMessage() {
  const message = messageInput.value.trim();
  if (message) {
    socket.send(message);
    messageInput.value = '';
  }
}

// Function to display a message in the chat interface
function displayMessage(message) {
  const messageElement = document.createElement('div');
  messageElement.textContent = message;
  messageArea.appendChild(messageElement);
  messageArea.scrollTop = messageArea.scrollHeight; // Scroll to the bottom
}

// Event listener for the send button
sendButton.addEventListener('click', sendMessage);

// Event listener for pressing Enter in the message input
messageInput.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    sendMessage();
  }
});

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useRef } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const socket = useRef(null); // Use useRef to persist the socket across re-renders
  const messageAreaRef = useRef(null);

  useEffect(() => {
    socket.current = new WebSocket('ws://your-server-address:8080');

    socket.current.addEventListener('open', () => {
      console.log('WebSocket connection established.');
    });

    socket.current.addEventListener('message', (event) => {
      const message = event.data;
      setMessages(prevMessages => [...prevMessages, message]);
    });

    socket.current.addEventListener('close', () => {
      console.log('WebSocket connection closed.');
    });

    socket.current.addEventListener('error', (error) => {
      console.error('WebSocket error:', error);
    });

    // Cleanup function to close the WebSocket connection when the component unmounts
    return () => {
      if (socket.current) {
        socket.current.close();
      }
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

  useEffect(() => {
    // Scroll to the bottom of the message area when new messages are added
    if (messageAreaRef.current) {
      messageAreaRef.current.scrollTop = messageAreaRef.current.scrollHeight;
    }
  }, [messages]);

  const sendMessage = () => {
    if (newMessage.trim()) {
      socket.current.send(newMessage);
      setNewMessage('');
    }
  };

  return (
    <div id="chat-container">
      <div id="message-area" ref={messageAreaRef}>
        {messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <div id="input-area">
        <input
          type="text"
          id="message-input"
          placeholder="Type your message..."
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          onKeyPress={(e) => {
            if (e.key === 'Enter') {
              sendMessage();
            }
          }}
        />
        <button id="send-button" onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

export default Chat;

            

              
                Copy